<template>
  <div class="paper-editor">
    <!-- 顶部操作栏 - 现代化设计 -->
    <div class="editor-header">
      <div class="header-left">
        <button class="btn btn-icon" @click="close">
          <i class="fas fa-arrow-left"></i>
        </button>
        <div class="title-edit-container">
          <div class="title-display" v-if="!editingTitle" @dblclick="handleTitleClick">
            <h2 class="editor-title" :title="paperData.status !== 1 ? '双击修改' : '已发布试卷，无法修改'">{{ paperData.paperName }}</h2>
            <div v-if="paperData.status !== 1" class="edit-hover">
              <i class="fas fa-edit edit-icon" @click="handleTitleClick"></i>
            </div>
          </div>
          <div v-else class="title-edit">
            <input 
              ref="titleInput" 
              type="text" 
              class="title-input" 
              v-model="paperData.paperName" 
              @blur="finishEditingTitle"
              @keyup.enter="finishEditingTitle"
              @keyup.esc="cancelEditingTitle"
            />
          </div>
        </div>
      </div>
      <div class="header-right">
        <!-- <button class=" btn word-btn" @click="exportExcel">
          <i class="fas fa-file-excel"></i> 导出题目 Excel
        </button> -->
        <el-dropdown trigger="click" @command="exportExam">
          <el-button type="primary">
            导出试卷<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">包含答案（Word）</el-dropdown-item>
            <el-dropdown-item command="1">不含答案（Word）</el-dropdown-item>
            <el-dropdown-item command="2">仅导出题目（Excel）</el-dropdown-item>
            <el-dropdown-item command="3">导出试卷（paper）</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <button class=" btn word-btn" @click="exportWord">
          <i class="fas fa-file-word"></i> 导出试卷 Word
        </button> -->
        <button class="btn btn-outline" @click="toggleAllQuestions">
          <i class="fas" :class="allExpanded ? 'fa-compress-alt' : 'fa-expand-alt'"></i>
          {{ allExpanded ? '全部收起' : '全部展开' }}
        </button>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="editor-content">
      <!-- 左侧试卷信息 -->
      <div class="paper-info">
        <div class="info-card">
          <h4 class="card-title">试卷信息</h4>

          <div class="form-group">
            <h4> 试卷名称 : {{ paperData.paperName }}</h4>
          </div>

          <div class="form-group">
            <h4 @dblclick="handleTimeClick" 
               v-if="!editingTime" 
               :title="paperData.status !== 1 ? '双击修改' : '已发布试卷，无法修改'">
              考试时长 : {{ paperData.timeLimit }} (分钟)
            </h4>
            <div v-else class="time-edit">
              <input 
                ref="timeInput"
                type="number"
                min="1"
                class="time-input"
                v-model="paperData.timeLimit"
                @blur="finishEditingTime"
                @keyup.enter="finishEditingTime"
                @keyup.esc="cancelEditingTime"
              />
              <span>分钟</span>
            </div>
          </div>

          <div class="stats-row">
            <div class="stat-item">
              <div class="stat-label">题目数量</div>
              <div class="stat-value">{{ paperData.questions && paperData.questions.length || 0 }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">总分</div>
              <div class="stat-value">{{ totalScore }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">试卷难度</div>
              <div class="stat-value">{{ getDifficultyText(paperData.avgDiffculty) }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧题目列表 -->
      <div v-if="paperData.questions && paperData.questions.length" class="question-list">
        <div v-for="(question, index) in paperData.questions" :key="question.paperQuestionId || index"
          class="question-card" :class="[getQuestionClass(question), { 'collapsed': !expandedQuestions[index] }]">
          <!-- 题目头部 -->
          <div class="question-header" @click="toggleQuestion(index)">
            <div class="question-meta">
              <span class="question-number">Q{{ index + 1 }}</span>
              <span class="question-type">{{ getQuestionTypeText(question.question && question.question.type) }}</span>
              <span class="question-difficulty">难度: {{ question.question && question.question.difficulty }}</span>
            </div>
            <div class="question-score-input">
              <p>{{ question.score }}</p>
              <span>分</span>
              <i class="fas toggle-icon" :class="expandedQuestions[index] ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
            </div>
          </div>

          <!-- 题目内容 -->
          <div class="question-content">
            <div class="question-text">{{ question.question && question.question.content }}</div>
          </div>

          <!-- 题目选项 -->
          <div v-if="[0, 1, 3].includes(question.question && question.question.type)" class="question-options">
            <div v-for="(option, oIndex) in parseOptions(question.question && question.question.options)" :key="oIndex"
              class="option-item" :class="{
                'correct-option': isCorrectOption(question, oIndex),
                'error-option': !isCorrectOption(question, oIndex),
                'selected-option': isSelectedOption(question, oIndex)
              }">
              <span class="option-letter">{{ String.fromCharCode(65 + oIndex) }}.</span>
              <span class="option-text">{{ option }}</span>
            </div>
          </div>

          <!-- 填空题打印 -->
          <div v-else-if="(question.question && question.question.type) === 2" class="judge-options">
            <div class="judge-answer">
              <span>正确答案: </span>
              <span class="answer-text" :class="{ 'correct': question.correctAnswer }">
                {{ question.correctAnswer ? '正确' : '错误' }}
              </span>
            </div>
          </div>

          <!-- 简答题打印 -->
          <div v-else-if="(question.question && question.question.type) === 4" class="judge-options">
            <div class="judge-answer">
              <span>正确答案: </span>
              <span class="answer-text" :class="{ 'correct': question.correctAnswer }">
                {{ question.correctAnswer ? '正确' : '错误' }}
              </span>
            </div>
          </div>

          <!-- 答案解析 -->
          <div class="question-analysis">
            <div class="analysis-header">
              <i class="fas fa-lightbulb"></i>
              <span>答案解析</span>
            </div>
            <div class="analysis-content">
              <div class="analysis-text">{{ (question.question && question.question.parse) || '暂无解析' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty-state">
        <i class="fas fa-inbox"></i>
        <p>暂无题目</p>
      </div>
    </div>
  </div>
</template>


<script>
import { getPaperQuestions as getPaperQuestionsAPI, getPaperDetail as getPaperDetailAPI, exportPaper as exportPaperAPI } from '@/api/paper';
import { mapGetters } from 'vuex';

export default {
  name: 'PaperEditorView',
  data() {
    return {
      paperData: {
        paperName: '',
        description: '',
        timeLimit: 60,
        questions: [],
        avgDiffculty: 3,
        isDel: 0,
        order: 8,
        paperId: null,
        paperQuestionId: null,
        question: {
          bankId: null,
          content: '',
          correctAnswer: '',
          createdAt: '',
          difficulty: '',
          isDel: 0,
          options: '',
          parse: '',
          questionId: null,
          type: 0,
          updatedAt: ''
        }
      },
      expandedQuestions: [],
      allExpanded: true,
      editingTitle: false,
      editingTime: false,
      originalTitle: '',
      originalTime: 60
    }
  },
  computed: {
    ...mapGetters('paper', ['getCheckedPaper']),
    ...mapGetters('user', ['getUserInfo']),
    totalScore() {
      return (this.paperData.questions && Array.isArray(this.paperData.questions)
        ? this.paperData.questions
        : []).reduce((sum, q) => sum + (q.score || 0), 0);
    },
    checkedPaper: {
      get() {
        return this.getCheckedPaper;
      },
      set(value) {
        this.$store.commit('paper/setCheckedPaper', value);
      }
    }
  },
  created() {
    this.initPaperData();
  },
  methods: {
    // 新增处理标题点击的方法
    handleTitleClick() {
      console.log("试卷状态:", this.paperData.status);
      // 检查状态是否为非1（未发布）
      if (this.paperData.status !== 1) {
        this.startEditingTitle();
      } else {
        this.$message.info('已发布的试卷不能修改标题');
      }
    },
    
    // 新增处理时间点击的方法
    handleTimeClick() {
      console.log("试卷状态:", this.paperData.status);
      // 检查状态是否为非1（未发布）
      if (this.paperData.status !== 1) {
        this.startEditingTime();
      } else {
        this.$message.info('已发布的试卷不能修改考试时长');
      }
    },

    // 导出试卷
    exportExam(index) {
      switch (index) {
        case "0":
          this.exportWord(true);
          break;
        case "1":
          this.exportWord(false);
          break;
        case "2":
          this.exportExcel();
          break;
        case "3":
          this.exportPaper();
          break;
        default:
          console.error('未知导出选项');
      }
    },
    // 导出 Word 的逻辑
    exportWord(withAnswer) {
      this.$export.exportPaperToWordV2(
        this.paperData.questions,
        {
          paperName: this.paperData.paperName,
          creator: this.getUserInfo.realName,
          duration: this.paperData.timeLimit
        },
        withAnswer  // 是否包含答案
      )
    },
    // 导出 Excel
    exportExcel() {
      // 导出 Excel 的逻辑
      if (!Array.isArray(this.paperData.questions)) {
        console.error('试卷题目数据不正确')
        return
      }

      const exportData = this.paperData.questions.map((item, index) => ({
        序号: index + 1,
        题目名称: item.question ? item.question.content : '',
        类型: item.question ? this.getQuestionTypeText(item.question.type) : '',
        选项: item.question ? item.question.options : '无',
        正确答案: item.question ? item.question.correctAnswer : '',
        解析: item.question ? item.question.parse : '',
        难度: item.question ? item.question.difficulty : '',
        分值: item.score
      }))

      const filename = `${this.paperData.paperName || '试卷'}.xlsx`
      this.$export.exportToExcel(exportData, filename)
    },

    // 导出试卷
    async exportPaper() {
      const paperId = this.checkedPaper && this.checkedPaper.paperId;
      if (!paperId) return;
      // 导出试卷的逻辑
      try {
        const res = await exportPaperAPI({ paperId });
        
        let {data,code,message} = res.data;
        
        if (code === 200) {
          this.$export.exportToPaper(data, this.paperData.paperName)
          this.$message.success('导出试卷成功');
          return;
        }else {
          this.$message.error(message);
          return;
        }
      } catch (error) {
        this.$message.error('导出试卷失败，请稍后重试');
        return;
      }
    },
    
    // 获取题型文本
    getQuestionTypeText(type) {
      const types = {
        0: '单选题',
        1: '多选题',
        2: '填空题',
        3: '判断题',
        4: '简答题',
      };
      return types[type] || '未知题型';
    },

    async initPaperData() {
      try {
        const paperId = this.checkedPaper && this.checkedPaper.paperId;
        if (!paperId) return;

        const paperDetailRes = await getPaperDetailAPI({ paperId });
        const paperDetail = paperDetailRes.data.data || {};

        if (!paperDetail.questions) {
          paperDetail.questions = [];
        }

        Object.assign(this.paperData, paperDetail);
        this.originalTitle = this.paperData.paperName;
        this.originalTime = this.paperData.timeLimit;

        const res = await getPaperQuestionsAPI({ paperId: this.paperData.paperId });
        const { data } = res.data;

        this.paperData.questions = Array.isArray(data) ? data : [];
        this.initExpandedState();
      } catch (error) {
        this.paperData.questions = [];
        this.$router.push("/paper-index");
      }
    },

    isCorrectOption(question, optionIndex) {
      if (!question.question || !question.question.correctAnswer || !question.question.options || optionIndex < 0) {
        return false;
      }
      const options = this.parseOptions(question.question.options);
      const currentOptionText = options[optionIndex] && options[optionIndex].trim();
      if (!currentOptionText) return false;

      const correctAnswers = question.question.correctAnswer
        .split(',')
        .map(answer => answer.trim())
        .filter(Boolean);

      return correctAnswers.includes(currentOptionText);
    },

    isSelectedOption(question, optionIndex) {
      if (!question.userAnswer) return false;
      const userAnswers = question.userAnswer.split(',');
      const currentOption = String.fromCharCode(65 + optionIndex);
      return userAnswers.includes(currentOption);
    },

    parseOptions(optionStr) {
      if (!optionStr) return [];
      return optionStr.split(',').map(opt => opt.trim());
    },

    startEditingTitle() {
      // 如果试卷已发布，不允许编辑
      if (this.paperData.status === 1) return;
      
      this.editingTitle = true;
      this.originalTitle = this.paperData.paperName;
      this.$nextTick(() => {
        this.$refs.titleInput.focus();
        this.$refs.titleInput.select();
      });
    },

    finishEditingTitle() {
      this.editingTitle = false; 
      if (!this.paperData.paperName.trim()) { 
        this.paperData.paperName = this.originalTitle; 
        this.$message.error('试卷标题不能为空'); 
      } else if (this.paperData.paperName !== this.originalTitle) {
        // 只有当标题确实被修改了才更新
        this.updatePaper('paperName');
      }
    },

    cancelEditingTitle() {
      this.paperData.paperName = this.originalTitle;
      this.editingTitle = false;
    },
    
    startEditingTime() {
      // 如果试卷已发布，不允许编辑
      if (this.paperData.status === 1) return;
      
      this.editingTime = true;
      this.originalTime = this.paperData.timeLimit;
      this.$nextTick(() => {
        this.$refs.timeInput.focus();
        this.$refs.timeInput.select();
      });
    },
    
    finishEditingTime() {
      this.editingTime = false;
      if (!this.paperData.timeLimit || this.paperData.timeLimit < 1) {
        this.paperData.timeLimit = this.originalTime;
        this.$message.error('考试时长必须大于0');
      } else if (Number(this.paperData.timeLimit) !== Number(this.originalTime)) {
        // 只有当时长确实被修改了才更新
        this.updatePaper('timeLimit');
      }
    },
    
    cancelEditingTime() {
      this.paperData.timeLimit = this.originalTime;
      this.editingTime = false;
    },
    
    // 更新试卷信息
    async updatePaper(changedField) {
      try {
        // 创建要更新的数据对象
        const updateData = {
          paperId: this.paperData.paperId,
          paperName: this.paperData.paperName,
          timeLimit: this.paperData.timeLimit
        };
        
        // 使用store的action更新试卷
        await this.$store.dispatch('paper/updatePaper', updateData);
        
        // 仅在有实际修改时显示提示
        if (changedField === 'paperName') {
          this.$message.success('试卷名称已更新');
          this.originalTitle = this.paperData.paperName;
        } else if (changedField === 'timeLimit') {
          this.$message.success('考试时长已更新');
          this.originalTime = Number(this.paperData.timeLimit);
        }
      } catch (error) {
        this.$message.error('更新试卷信息失败');
        // 恢复原值
        if (changedField === 'paperName') {
          this.paperData.paperName = this.originalTitle;
        } else if (changedField === 'timeLimit') {
          this.paperData.timeLimit = this.originalTime;
        }
      }
    },

    initExpandedState() {
      this.expandedQuestions = Array.isArray(this.paperData.questions)
        ? this.paperData.questions.map(() => false)
        : [];
      this.allExpanded = false;
    },

    getDifficultyText(level) {
      console.log(level);
      
      const levels = ['容易', '容易', '容易','中等', '中等','中等','中等','困难', '困难','困难'];
      return levels[level - 1] || '未知';
    },

    getQuestionClass(question) {
      return {
        'single-choice': question.type === 'single',
        'multi-choice': question.type === 'multi',
        'judge-question': question.type === 'judge'
      };
    },

    toggleQuestion(index) {
      this.$set(this.expandedQuestions, index, !this.expandedQuestions[index]);
      this.checkAllExpandedState();
    },

    toggleAllQuestions() {
      this.allExpanded = !this.allExpanded;
      this.expandedQuestions = this.expandedQuestions.map(() => this.allExpanded);
    },

    checkAllExpandedState() {
      this.allExpanded = this.expandedQuestions.every(expanded => expanded);
    },

    close() {
      this.$router.push("/paper-index");
    },

    save() {
      if (!this.validatePaper()) return;
      this.paperData.totalScore = this.totalScore;
      this.$emit('save', this.paperData);
      this.close();
    },

    validatePaper() {
      if (!this.paperData.paperName || this.paperData.paperName.trim() === '') { this.$message.error('试卷名称不能为空'); return false; } if (this.paperData.timeLimit <= 0) { this.$message.error('考试时长必须大于0'); return false; } for (const question of this.paperData.questions) { if (question.score <= 0) { this.$message.error(`第${this.paperData.questions.indexOf(question) + 1}题分值必须大于0`); return false; } }
      return true;
    }
  }
};
</script>


<style lang="less" scoped>
// 现代化配色方案
@primary: #4F46E5;
@primary-light: #818CF8;
@primary-lighter: #C7D2FE;
@secondary: #7C3AED;
@success: #10B981;
@warning: #F59E0B;
@danger: #EF4444;
@info: #3B82F6;

@gray-50: #F9FAFB;
@gray-100: #F3F4F6;
@gray-200: #E5E7EB;
@gray-300: #D1D5DB;
@gray-400: #9CA3AF;
@gray-500: #6B7280;
@gray-600: #4B5563;
@gray-700: #374151;
@gray-800: #1F2937;
@gray-900: #111827;

@shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
@radius-sm: 0.375rem;
@radius-md: 0.5rem;
@radius-lg: 0.75rem;
@transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

.paper-editor {
  // position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  height: 99%;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  border-bottom: 1px solid @gray-200;
  background-color: white;
  box-shadow: @shadow-sm;
  z-index: 10;

  .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .title-edit-container {
    position: relative;
    min-width: 200px;
    max-width: 500px;

    .title-input {
      font-size: 1.25rem;
      font-weight: 600;
      color: @gray-800;
      border: 2px solid @primary-light;
      border-radius: @radius-sm;
      padding: 0.5rem 1rem;
      width: 100%;
      transition: @transition;
      box-shadow: 0 0 0 2px rgba(@primary, 0.1);

      &:focus {
        outline: none;
        border-color: @primary;
        box-shadow: 0 0 0 3px rgba(@primary, 0.2);
      }

      &::placeholder {
        color: @gray-400;
        font-weight: 500;
      }
    }

    .title-display {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      position: relative;
      padding-right: 2rem;

      &:hover {
        .edit-hover {
          opacity: 1;
        }
      }

      .editor-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: @gray-800;
        transition: @transition;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .edit-hover {
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        opacity: 0;
        transition: @transition;

        .edit-icon {
          font-size: 1rem;
          color: @gray-500;
          transition: @transition;
          cursor: pointer;
          
          &:hover {
            color: @primary;
          }
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .el-button--primary {
      background-color: #007bff;
    }

    .word-btn {
      background-color: #007bff;
      color: white;

      &:hover {
        background-color: darken(#007bff, 5%);
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  width: 100%;
  font-size: 28px;
}

.editor-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.paper-info {
  width: 300px;
  border-right: 1px solid @gray-200;
  padding: 1.5rem;
  overflow-y: auto;
  background-color: @gray-50;

  .info-card {
    background-color: white;
    border-radius: @radius-md;
    padding: 1.5rem;
    box-shadow: @shadow-sm;
    margin-bottom: 1.5rem;
  }

  .card-title {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: @gray-800;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &::before {
      content: "";
      display: block;
      width: 4px;
      height: 16px;
      background-color: @primary;
      border-radius: 2px;
    }
  }

  .form-group {
    margin-bottom: 1.25rem;

    h4 {
      cursor: pointer;
      
      &:hover {
        color: @primary;
      }
    }
    
    .time-edit {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      
      .time-input {
        width: 80px;
        padding: 0.5rem;
        border: 1px solid @primary-light;
        border-radius: @radius-sm;
        font-size: 1rem;
        font-weight: 500;
        color: @gray-800;
        
        &:focus {
          outline: none;
          border-color: @primary;
          box-shadow: 0 0 0 2px rgba(@primary, 0.1);
        }
      }
    }
  }

  .stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid @gray-200;

    .stat-item {
      flex: 1;
      min-width: 100px;

      .stat-label {
        font-size: 1rem;
        color: @gray-500;
        margin-bottom: 0.25rem;
      }

      .stat-value {
        font-size: 1.125rem;
        font-weight: 600;
        color: @gray-800;
        //text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }
    }
  }
}

.question-list {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.question-card {
  background-color: white;
  border-radius: @radius-md;
  box-shadow: @shadow-sm;
  transition: @transition;

  &:hover {
    box-shadow: @shadow-md;
  }

  &.single-choice {
    border-left: 4px solid @primary;
  }

  &.multi-choice {
    border-left: 4px solid @secondary;
  }

  &.judge-question {
    border-left: 4px solid @success;
  }

  &.collapsed {

    .question-content,
    .question-options,
    .judge-options,
    .question-analysis {
      display: none;
    }

    .question-header {
      border-bottom: none;
    }
  }
}

.question-options {
  .option-item {
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 4px;
    transition: all 0.2s;

    &.correct-option {
      background-color: #f0fff4; // 浅绿色背景
      border-left: 3px solid @success; // 绿色左边框
      color: darken(@success, 10%);

      .option-letter {
        font-weight: bold;
        color: @success;
      }
    }

    &.error-option {
      background-color: #fff0f0; // 浅绿色背景
      border-left: 3px solid @danger; // 绿色左边框
      color: darken(@danger, 10%);

      .option-letter {
        font-weight: bold;
        color: @danger;
      }
    }

    &.selected-option:not(.correct-option) {
      background-color: #fff8f0; // 浅橙色背景
      border-left: 3px solid @warning; // 橙色左边框
      color: darken(@warning, 10%);

      .option-letter {
        font-weight: bold;
        color: @warning;
      }
    }
  }
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background-color: @gray-50;
  border-bottom: 1px solid @gray-200;
  cursor: pointer;
  transition: @transition;

  &:hover {
    background-color: darken(@gray-50, 2%);
  }

  .question-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;

    .question-number {
      font-weight: 600;
      color: @gray-800;
      font-size: 0.9375rem;
      background-color: @gray-200;
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
    }

    .question-type {
      font-size: 0.75rem;
      background-color: @gray-200;
      color: @gray-700;
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
      font-weight: 5;
    }

    .question-difficulty {
      font-size: 0.75rem;
      color: @gray-600;
      display: flex;
      align-items: center;
      gap: 0.25rem;

      &::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: @gray-400;
      }
    }
  }

  .question-score-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;

    input {
      width: 60px;
      padding: 0.5rem;
      border: 1px solid @gray-300;
      border-radius: @radius-sm;
      text-align: center;
      font-weight: 500;
      color: @primary;
      background-color: white;

      &:focus {
        outline: none;
        border-color: @primary;
      }
    }

    span {
      font-size: 0.875rem;
      color: @gray-600;
    }

    .toggle-icon {
      margin-left: 0.5rem;
      color: @gray-500;
      font-size: 0.875rem;
      transition: @transition;
    }
  }
}

.question-content {
  padding: 1.5rem;
  transition: @transition;

  .question-text {
    font-size: 0.9375rem;
    color: @gray-800;
    line-height: 1.7;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.5rem 1.5rem;
  transition: @transition;

  .option-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: @radius-sm;
    background-color: @gray-50;
    position: relative;
    transition: @transition;

    &.correct {
      background-color: rgba(@success, 0.08);
      border-left: 3px solid @success;
    }

    .option-letter {
      font-weight: 600;
      color: @gray-700;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: @gray-200;
      border-radius: 50%;
      font-size: 0.8125rem;
    }

    .option-text {
      flex: 1;
      color: @gray-700;
      font-size: 0.875rem;
    }

    .correct-badge {
      font-size: 0.75rem;
      color: @success;
      background-color: rgba(@success, 0.1);
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-weight: 500;
    }
  }
}

.judge-options {
  padding: 0 1.5rem 1.5rem;
  transition: @transition;

  .judge-answer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: @gray-700;

    .answer-text {
      font-weight: 500;
      padding: 0.25rem 0.75rem;
      border-radius: @radius-sm;
      background-color: @gray-100;

      &.correct {
        color: @success;
        background-color: rgba(@success, 0.1);
      }
    }
  }
}

.question-analysis {
  background-color: @gray-50;
  border-top: 1px solid @gray-200;
  padding: 1.5rem;
  transition: @transition;

  .analysis-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: @gray-800;

    i {
      color: @warning;
      font-size: 1.1em;
    }
  }

  .analysis-content {
    background-color: white;
    border-radius: @radius-md;
    padding: 1.25rem;
    box-shadow: @shadow-sm;
    border: 1px solid @gray-200;

    .analysis-text {
      font-size: 0.9375rem;
      color: @gray-700;
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .knowledge-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding-top: 0.75rem;
      border-top: 1px dashed @gray-200;

      .tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
        background-color: @primary-lighter;
        color: @primary;
        border-radius: 1rem;
        font-weight: 500;
      }
    }
  }
}

.btn {
  padding: 0.625rem 1.25rem;
  border-radius: @radius-sm;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: @transition;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  &.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    color: @gray-600;

    &:hover {
      background-color: @gray-100;
    }
  }

  &.btn-primary {
    background-color: @primary;
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    &:hover {
      background-color: darken(@primary, 5%);
    }
  }

  &.btn-outline {
    background-color: transparent;
    border: 1px solid @gray-300;
    color: @gray-700;

    &:hover {
      background-color: @gray-50;
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .paper-info {
    width: 280px;
    padding: 1rem;
  }

  .question-header,
  .question-content,
  .question-options,
  .question-analysis {
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .editor-content {
    flex-direction: column;
  }

  .paper-info {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid @gray-200;
    padding: 1rem;
    overflow-y: visible;
  }

  .question-list {
    padding: 1rem;
  }

  .editor-header {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .editor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;

    .header-right {
      width: 100%;
      justify-content: flex-end;
    }

    .title-edit-container {
      width: 100%;

      .title-input {
        width: 100%;
      }
    }
  }

  .question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;

    .question-score-input {
      width: 100%;
      justify-content: flex-end;
    }
  }
}
</style>